window.onload = function() {

    // onload 事件会在页面或图像加载完成后立即发生。
    var all = document.getElementsByClassName('all')[0];
    var screen = document.getElementsByClassName('screen')[0];
    var control = document.getElementsByClassName('control')[0];
    var arr = document.getElementsByClassName('arr')[0];
    var left = document.getElementsByClassName('left')[0];
    var right = document.getElementsByClassName('right')[0];
    var wuda = document.getElementsByClassName('wuda')[0];
    var wenzi = document.getElementsByClassName('wenzi')[0];
    var wenzi_xiao = document.getElementsByClassName('wenzi_xiao')[0];

    var newLi = screen.children[1].cloneNode(true);
    screen.append(newLi);
    var newLi = screen.children[2].cloneNode(true);
    screen.append(newLi);
    var newvar = wenzi.children[1].cloneNode(true);
    wenzi.append(newvar);
    var newvar = wenzi.children[2].cloneNode(true);
    wenzi.append(newvar);


    screen.style.width = screen.children.length * all.offsetWidth + 'px';
    // console.log(newLi);
    wenzi.style.width = wenzi.children.length * wenzi_xiao.offsetWidth + 'px';

    for (var i = 0; i < screen.children.length - 3; i++) {
        var li = document.createElement('li');
        control.append(li);
    }
    control.children[0].className = 'active';

    var key = 0;
    var square = 0;
    var zi = 0;

    var ever = setInterval(autoPlay, 4000); //按照指定的周期（以毫秒计）来调用函数或计算表达式。

    function autoPlay() {
        zi++;
        if (zi > wenzi.children.length - 3) {
            zi = 1;
            wenzi.style.left = 0;
        }
        // screen.style.left = -all.offsetWidth * key + 'px';
        animate(wenzi, -wenzi_xiao.offsetWidth * zi);
        key++;
        if (key > screen.children.length - 3) {
            key = 1;
            screen.style.left = 0;
        }
        // screen.style.left = -all.offsetWidth * key + 'px';
        animate(screen, -all.offsetWidth * key);

        //排他思想
        for (var i = 0; i < control.children.length; i++) {
            control.children[i].className = '';
        } //设置所有圆点底色都为原色
        square++;
        if (square > control.children.length - 1) {
            square = 0;
        }
        control.children[square].className = 'active';
        // console.log(square);
    }

    all.onmouseover = function() {
        //鼠标悬停在all盒子上时绑定事件
        clearInterval(ever); //清除定时器ever
        arr.style.display = 'block'
            // display 为block 此元素将显示为块级元素
    }

    all.onmouseout = function() {
        //鼠标移出在all盒子上时绑定事件
        ever = setInterval(autoPlay, 4000); //执行定时器ever
        arr.style.display = 'none';
        //display为none	此元素不会被显示。
    }

    for (var i = 0; i < control.children.length; i++) {
        control.children[i].index = i;
        control.children[i].onclick = function() {
            for (var i = 0; i < control.children.length; i++) {
                control.children[i].className = '';
            } //所有点为原来的颜色
//             this.className = 'active'; //指向哪一个点,红色便移动到哪一个点
//             square = key = this.index; //下一次的循环从当前指向的index的下一次开始
//             // screen.style.left = -this.index * all.offsetWidth + 'px';
//             animate(screen, -this.index * all.offsetWidth)
//                 // animate将元素从一个状态改变为另一个状态。
//             animate(wenzi, -this.index * wenzi_xiao.offsetWidth)

        }
    }

    left.onclick = function() {
        //鼠标单击在left盒子上时绑定事件
        zi--;
        if (zi < 0) {
            zi = wenzi.children.length - 3;
            zi--
            wenzi.style.left = -zi * wenzi_xiao.offsetWidth + 'px';

            // key--
        }

        animate(wenzi, -zi * wenzi_xiao.offsetWidth)
        key--;
        if (key < 0) {
            key = screen.children.length - 3;
            key--
            screen.style.left = -key * all.offsetWidth + 'px';

            // key--
        }

        animate(screen, -key * all.offsetWidth)

        square--;
        if (square < 0) {
            square = control.children.length - 1;
        }
        // console.log(square);
        for (var i = 0; i < control.children.length; i++) {
            control.children[i].className = '';
        }
        control.children[square].className = 'active';
    }

    right.onclick = function() {
        //鼠标单击在right盒子上时绑定事件
        autoPlay();
    }

    function animate(ele, target) {
        clearInterval(timer); //清除定时器timer
        var speed = target > ele.offsetLeft ? 15 : -15;

        var timer = setInterval(function() {
            //按照指定的周期（以毫秒计）来调用函数或计算表达式。
            var distance = target - ele.offsetLeft;
            if (Math.abs(distance) > Math.abs(speed)) {
                ele.style.left = ele.offsetLeft + speed + 'px';
            } else {
                ele.style.left = target + 'px';
                clearInterval(timer);
            }

        }, 5);

    }
}